<template>
  <view>
    <!-- 订单功能区 -->
    <view class="function-sen">
      <view class="section-title">
        <text class="mys">订单中心</text>
        <text class="all">全部订单</text>
      </view>
      <view class="order-grids">
        <view
          class="order-item"
          v-for="item in orderItems"
          :key="item.text"
          @tap="onOrder(item)"
        >
          <!-- <image class="icon" :src="item.icon" mode="aspectFit" /> -->
          <IconFont
            font-class-name="iconfont"
            class-prefix="icon"
            color="#f7a93b"
            :name="item.icon"
            size="32"
          />
          <text>{{ item.text }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";

import Taro from "@tarojs/taro";
import { IconFont } from "@nutui/icons-vue-taro";

// 订单图标
import pendingPaymentIcon from "@/assets/imgs/wall.svg";
import tosendIcon from "@/assets/imgs/wait.svg";
import logisticsIcon from "@/assets/imgs/auto.svg";
import afterSaleIcon from "@/assets/imgs/hexiao.svg";
// import moreIcon from "@/assets/imgs/more.svg";

// 优惠券图标
import couponIcon from "@/assets/imgs/hexiaoma.svg";
import usedIcon from "@/assets/imgs/wangdian.svg";
import expiredIcon from "@/assets/imgs/tuijian.svg";
// import giftIcon from "@/assets/imgs/gift.svg";

const orderItems = ref([
  { icon: "dingdanyichenggong", text: "待接单" },
  { icon: "dingdan", text: "待勘查" },
  { icon: "order-fill", text: "已勘查" },
  { icon: "custom-constructi", text: "施工中" },
  { icon: "xingxing", text: "已完工" },
  { icon: "gouxuan", text: "已完成" },
  { icon: "shanchu2", text: "已关闭" },
]);

const couponItems = ref([
  { icon: couponIcon, text: "消费码" },
  { icon: usedIcon, text: "我的网体" },
  { icon: expiredIcon, text: "我的推荐" },
]);

const onCoupon = (item) => {
  if (item.text === "我的网体") {
    Taro.navigateTo({
      url: "/pages-detail/my/dicty",
    });
    return;
  }
  if (item.text === "我的推荐") {
    Taro.navigateTo({
      url: "/pages-detail/my/recommend",
    });
    return;
  }
  if (item.text === "消费码") {
    Taro.navigateTo({
      url: "/pages-detail/my/code",
    });
    return;
  }
};

const onOrder = (item) => {
  if (item.text === "扫描订单") {
    Taro.scanCode({
      success: (res) => {
        console.log(res);
        // res.result
        // 跳转到订单页面
        // Taro.navigateTo({
        //   url: "/pages-detail/my/order",
        // });
      },
      fail: (res) => {
        console.log(res);
      },
    });
    return;
  }

  // 跳转到订单页面
  Taro.navigateTo({
    url: "/pages-detail/my/order",
  });
};
</script>

<style lang="scss">
.function-sen {
  background: #fff;
  margin: 30rpx;
  border-radius: 20rpx;
  padding: 0 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
  position: relative;
  z-index: 3;

  .section-title {
    padding: 30rpx 10rpx;
    font-size: 32rpx;
    display: flex;
    justify-content: space-between;
    border-bottom: 1rpx solid #f5f5f5;
    .mys {
      color: #333;
      font-weight: 600;
    }

    .all {
      font-size: 24rpx;
      color: #f7a93b;
    }
  }

  .order-grids{
    padding: 30rpx 0;
    grid-template-columns: repeat(4, 1fr); // 一行四列等宽布局
    gap: 30rpx; // 网格间隙
    padding: 30rpx 0;
    display: grid;

    .order-item {
      width: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: auto !important;

      .icon {
        width: 48rpx;
        height: 48rpx;
      }

      text {
        margin-top: 16rpx;
        font-size: 26rpx;
        color: #666;
      }
    }
  }

  .coupon-grid {
    display: flex;
    flex-wrap: wrap;
    padding: 20rpx 0;

    .coupon-items {
      width: 33%;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20rpx 0;

      .icon {
        width: 48rpx;
        height: 48rpx;
      }

      text {
        margin-top: 16rpx;
        font-size: 26rpx;
        color: #666;
      }
    }
  }
}
</style>
